<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>用户中心</title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">个人中心</h1>
		</header>
		<div class="mui-content">
			<div v-if="loginState.loginToken===undefined" style="width: 100%;height:100%;background-color:white;text-align: center;">
				<p>欢迎来到校园二手平台</p>
				<button type="button" onclick="goToLoginPage()" class="mui-btn mui-btn-danger">立即登录</button>
			</div>
			<div v-if="loginState.loginToken!==undefined" onclick="openPersonInfoPage()" class="mui-card-header mui-card-media" style="background-color: white;height: 60px;padding-left: 20px;">
				<img :src="loginState.userFace" style="border-radius: 34px;" />
				<div class="mui-media-body">
					{{loginState.userNickeName}}
					<p>编辑个人资料</p>
				</div>
			</div>
			<ul v-if="loginState.loginToken!==undefined" class="mui-table-view">
				<li class="mui-table-view-divider">我的宝贝</li>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" onclick="open_goods_list()">
						<i class="mui-icon mui-icon-compose"></i>
						<span class="mui-navigate-right" data-title-type="native">
							我发布的
						</span>
					</li>
					<li class="mui-table-view-cell" onclick="open_order_list()">
						<i class="mui-icon mui-icon-bars"></i>
						<span class="mui-navigate-right" data-title-type="native">
							我的订单
						</span>
					</li>
					<li class="mui-table-view-cell" onclick="open_collection_list()">
						<i class="mui-icon mui-icon-starhalf"></i>
						<span class="mui-navigate-right" data-title-type="native">
							我的收藏
						</span>
					</li>
					<li class="mui-table-view-cell" onclick="open_address_list_page()">
						<i class="mui-icon mui-icon-list"></i>
						<span class="mui-navigate-right" data-title-type="native">
							收货地址
						</span>
					</li>

				</ul>
				<li class="mui-table-view-divider">设置</li>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<i class="mui-icon mui-icon-info"></i>
						<span class="mui-navigate-right" data-title-type="native">
							关于我们
						</span>
					</li>
					<li class="mui-table-view-cell" onclick="celer()">
						<i class="mui-icon mui-icon-trash"></i> 清除缓存
					</li>
				</ul>
			</ul>
		</div>
		<script type="text/javascript" src="../js/const.js"></script>
		<script type="text/javascript" src="../js/app.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script>
			(function() {
				mui.init();
				getLoginState();

			})();

			function goToLoginPage() {

				plus.webview.open('login.html', 'new', {}, 'slide-in-right', 200);
			}
			window.addEventListener('refresh', function(e) {
				getLoginState();
				location.reload();
				//				console.log(JSON.stringify(vm.loginState));
				console.log("登录检查");
			})

			function celer() {
				app.removeState();
				location.reload();
				plus.nativeUI.toast("缓存清除成功");
			}

			function getLoginState() {
				var state = app.getState();
				var vm = new Vue({
					el: ".mui-content",
					data: {
						loginState: state
					}
				})

			}

			function openPersonInfoPage() {
				//触发详情页面的自定义事件
				mui.fire(personInfoPage, 'userId');
				personInfoPage.show('slide-in-right');
			}

			//			function getUserInfo(){
			//				var userNickeName = 
			//				
			//			}
			mui.plusReady(function() {
				personInfoPage = plus.webview.getWebviewById('person-info');
				if(!personInfoPage) {
					personInfoPage = mui.preload({
						id: 'person-info',
						url: 'person-info.html'
					});
				}
			});

			function open_address_list_page() {
				//打开地址详情页面
				mui.openWindow({
					id: 'address-list.html',
					url: 'address-list.html',

				});
			}

			function open_collection_list() {
				mui.openWindow({
					id: 'my-collection-list.html',
					url: 'my-collection-list.html',

				});
			}

			function open_goods_list() {
				mui.openWindow({
					id: 'my-goods-list.html',
					url: 'my-goods-list.html',

				});
			}

			function open_order_list() {
				mui.openWindow({
					id: 'my-order-list.html',
					url: 'my-order-list.html',

				});
			}
		</script>
	</body>

</html>